<template>
	<div class="rule-center">
		<div class="search">
			<el-card class="search-card">
				<el-form
					ref="formRef"
					:inline="true"
					:model="formInline"
					class="demo-form-inline">
					<el-form-item
						label="资源"
						prop="name">
						<el-input
							v-model="formInline.name"
							@input="(v: any)=>(formInline.name=v.replace(/[^\u4e00-\u9fa5_a-zA-Z0-9.-/_\s]/g,''))"
							placeholder="请输入..."
							clearable />
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							@click="onSubmit"
							>搜索</el-button
						>
						<el-button @click="onReset(formRef)">重置</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
		<div class="table">
			<div class="table-tool">
				<div class="tool-title">
					<p class="title-text">查询结果</p>
				</div>
				<div class="tool-btn">
					<el-button
						type="primary"
						:icon="Plus"
						@click="addRule"
						>新建</el-button
					>
					<!-- <el-button :icon="Bottom">批量下发</el-button>
					<el-button :icon="Open">批量启用</el-button>
					<el-button :icon="Remove">批量禁用</el-button>
					<el-button :icon="Delete">批量作废</el-button> -->
				</div>
			</div>
			<Table
				:data="tableData"
				:columns="columns"
				:height="tableHeight"
				:paginationConfig="paginationConfig"
				@page-change="handlePageChange"
				@size-change="handleSizeChange" />
		</div>
	</div>
	<EffectDialog ref="effectDialogRef" />
</template>

<script lang="ts" setup>
	import { computed, h, onMounted, reactive, ref } from 'vue'
	import { Edit, Plus, Delete, Open, Remove, Bottom, MoreFilled } from '@element-plus/icons-vue'
	import { useRouter } from 'vue-router'
	import { ApiPageList } from '@/api/api'
	import { api_status } from '@/dict/api-info'
	import { ElButton, ElLink, ElPopconfirm, type FormInstance } from 'element-plus'
	import Table from '@/components/Table/index.vue'
	import useStore from '@/store/index'
	import EffectDialog from './EffectDialog/index.vue'
	import pageJson from './pageJson.json'

	const state = useStore()

	const formRef = ref<FormInstance>()

	const effectDialogRef = ref()

	const router = useRouter()

	const formInline = reactive({
		name: '',
	})

	const tableData = ref<any>([
		{
			name: '1',
			lifecycle: '1',
		},
	])
	const apiPageData = ref<any>([])

	const paginationConfig = reactive({
		total: 0,
		currentPage: 1,
		pageSize: 10,
		paginationShow: true,
	})

	const columns = ref<any>([
		{
			prop: 'name',
			label: '资源',
			align: 'center',
			// render: (scope: any) => {
			// 	return [h(ElLink, { props: { type: 'primary', size: 'small' }, onClick: () => detailClick(scope.row) }, scope.row.name), []]
			// },
		},
		{
			prop: 'lifecycle',
			label: '规则类型',
			width: 160,
			align: 'center',
			render: (scope: any) => {
				return api_status.getLabel(scope.row.lifecycle)
			},
		},
		{
			prop: 'lifecycle',
			label: '规则状态',
			width: 160,
			align: 'center',
		},
		{
			prop: 'lifecycle',
			label: '生效点',
			align: 'center',
		},
		{
			prop: 'lifecycle',
			label: '创建人',
			align: 'center',
		},
		{
			prop: 'lifecycle',
			label: '最近修改人',
			width: 160,
			align: 'center',
		},
		{
			prop: 'lifecycle',
			label: '最近修改时间',
			width: 160,
			align: 'center',
		},
		{
			prop: 'lifecycle',
			label: '生效时间',
			width: 160,
			align: 'center',
		},
		{
			prop: 'lifecycle',
			label: '失效时间',
			width: 160,
			align: 'center',
		},
		{
			prop: 'operate',
			label: '操作',
			align: 'center',
			fixed: 'right',
			width: 420,
			render: (scope: any) => {
				return [
					h(
						ElButton,
						{
							onClick: () => detailClick(scope.row),
							type: 'primary',
							disabled: false,
							size: 'small',
							// icon: 'View',
							round: false,
							circle: false,
							plain: false,
							link: false,
						},
						{ default: () => '查看' }
					),
					h(
						ElButton,
						{
							onClick: () => issuedClick(scope.row),
							type: 'primary',
							disabled: false,
							size: 'small',
							// icon: 'View',
							round: false,
							circle: false,
							plain: false,
							link: false,
						},
						{ default: () => '下发' }
					),
					// h(
					// 	ElButton,
					// 	{
					// 		onClick: () => openClick(scope.row),
					// 		type: 'success',
					// 		disabled: false,
					// 		size: 'small',
					// 		// icon: 'View',
					// 		round: false,
					// 		circle: false,
					// 		plain: false,
					// 		link: false,
					// 	},
					// 	{ default: () => '启用' }
					// ),
					h(
						ElPopconfirm,
						{
							title: '确定启用吗？',
							onConfirm: () => openClick(scope.row),
						},
						{
							default: () => ['xxx'],
							reference: () =>
								h(
									'span',
									// props 传递
									{
										link: true,
										type: 'danger',
									},
									// 内容配置
									[
										h(
											ElButton,
											{
												// onClick: () => removeClick(scope.row),
												type: 'success',
												disabled: false,
												size: 'small',
												style: 'margin-left: 12px',
												// icon: 'View',
												round: false,
												circle: false,
												plain: false,
												link: false,
											},
											{
												default: () => '启用',
											}
										),
									]
								),
						}
					),
					// h(
					// 	ElButton,
					// 	{
					// 		onClick: () => banClick(scope.row),
					// 		type: 'warning',
					// 		disabled: false,
					// 		size: 'small',
					// 		// icon: 'View',
					// 		round: false,
					// 		circle: false,
					// 		plain: false,
					// 		link: false,
					// 	},
					// 	{ default: () => '禁用' }
					// ),
					h(
						ElPopconfirm,
						{
							title: '确定禁用吗？',
							onConfirm: () => banClick(scope.row),
						},
						{
							default: () => ['xxx'],
							reference: () =>
								h(
									'span',
									// props 传递
									{
										link: true,
										type: 'danger',
									},
									// 内容配置
									[
										h(
											ElButton,
											{
												// onClick: () => removeClick(scope.row),
												type: 'warning',
												disabled: false,
												size: 'small',
												style: 'margin-left: 12px',
												// icon: 'View',
												round: false,
												circle: false,
												plain: false,
												link: false,
											},
											{
												default: () => '禁用',
											}
										),
									]
								),
						}
					),
					h(
						ElPopconfirm,
						{
							title: '确定作废吗？',
							onConfirm: () => removeClick(scope.row),
						},
						{
							default: () => ['xxx'],
							reference: () =>
								h(
									'span',
									// props 传递
									{
										link: true,
										type: 'danger',
									},
									// 内容配置
									[
										h(
											ElButton,
											{
												// onClick: () => removeClick(scope.row),
												type: 'danger',
												disabled: false,
												size: 'small',
												style: 'margin-left: 12px; margin-right: 12px',
												// icon: 'View',
												round: false,
												circle: false,
												plain: false,
												link: false,
											},
											{
												default: () => '作废',
											}
										),
									]
								),
						}
					),
					h(
						ElButton,
						{
							onClick: () => editClick(scope.row),
							type: 'primary',
							disabled: false,
							size: 'small',
							// icon: 'View',
							round: false,
							circle: false,
							plain: false,
							link: false,
						},
						{ default: () => '编辑' }
					),
				]
			},
		},
	])

	const addApiRef = ref()

	const tableHeight = computed(() => {
		const clientHeight = document.documentElement.clientHeight
		return clientHeight - 300
	})

	const handlePageChange = (val: any) => {
		paginationConfig.currentPage = val
		getTableData()
	}

	const handleSizeChange = (val: any) => {
		paginationConfig.pageSize = val
		getTableData()
	}

	const onSubmit = () => {
		getTableData()
	}
	const onReset = (formEl: FormInstance | undefined) => {
		if (!formEl) return
		formEl.resetFields()
		getTableData()
	}

	const addRule = () => {
		router.push({
			path: 'rule_center/add_rule',
			query: { state: 'add' },
		})
	}

	const detailClick = (val: any) => {
		router.push('rule_center/rule_detail')
	}

	const editClick = (val: any) => {
		router.push({
			path: 'rule_center/add_rule',
			query: { state: 'edit' },
		})
	}

	const issuedClick = (val: any) => {
		console.log('%c Line:412 🍩 val', 'color:#7f2b82', val)

		// 		url:/rule/dispatch/{apiVersion}/namespaces/{namespace}/kinds/{kind}/names/{name}/versions/{version}
		// 	{apiVersion}: api版本
		// 	{namespace}: namespace, 默认为default
		// 	{kind}: 规则类型，RateLimit：限流，CircuitBreaker：熔断，Fallback：降级
		// 	{name}：资源名称
		// 	{version}：资源version
		// 请求方式：post
		// 请求参数：
		// {
		//     "provider": "test",//提供方法
		//     "consumers": [//消费方
		//         "test1"
		//     ]
		// }

		effectDialogRef.value.showDialog(true)
		effectDialogRef.value.setTitle('生效点')
	}
	const openClick = (val: any) => {
		console.log('%c Line:416 🥚 val', 'color:#33a5ff', val)

		// 		url:/rule/enable/{apiVersion}/namespaces/{namespace}/kinds/{kind}/names/{name}/versions/{version}
		// 	{apiVersion}: api版本
		// 	{namespace}: namespace, 默认为default
		// 	{kind}: 规则类型，RateLimit：限流，CircuitBreaker：熔断，Fallback：降级
		// 	{name}：资源名称
		// 	{version}：资源version
		// 请求方式：get

		// effectDialogRef.value.showDialog(true)
		// effectDialogRef.value.setTitle('生效点')
	}
	const banClick = (val: any) => {
		console.log('%c Line:420 🥥 val', 'color:#b03734', val)

		// 		url:/rule/disable/{apiVersion}/namespaces/{namespace}/kinds/{kind}/names/{name}/versions/{version}
		// 	{apiVersion}: api版本
		// 	{namespace}: namespace, 默认为default
		// 	{kind}: 规则类型，RateLimit：限流，CircuitBreaker：熔断，Fallback：降级
		// 	{name}：资源名称
		// 	{version}：资源version
		// 请求方式：get

		// effectDialogRef.value.showDialog(true)
		// effectDialogRef.value.setTitle('生效点')
	}
	const removeClick = (val: any) => {
		console.log('%c Line:358 🍔 val', 'color:#e41a6a', val)
		console.log('作废')

		// 		url:/rule/discard/{apiVersion}/namespaces/{namespace}/kinds/{kind}/names/{name}/versions/{version}
		// 	{apiVersion}: api版本
		// 	{namespace}: namespace, 默认为default
		// 	{kind}: 规则类型，RateLimit：限流，CircuitBreaker：熔断，Fallback：降级
		// 	{name}：资源名称
		// 	{version}：资源version
		// 请求方式：get
		// effectDialogRef.value.showDialog(true)
		// effectDialogRef.value.setTitle('生效点')
	}

	const getTableData = () => {
		let params = {
			labelSelector: '',
			page: paginationConfig.currentPage.toString(),
			size: paginationConfig.pageSize.toString(),
			version: 'version=latestVersion',
			name: formInline.name,
		}
		// ApiPageList(params)
		// 	.then((res: any) => {
				tableData.value = []
				// apiPageData.value = pageJson.data
				pageJson.data.map((item: any) => {
					tableData.value.push({
						// name: item.metadata.name,
						// lifecycle: item.spec.lifecycle,
					})
				})
		// 		paginationConfig.total = Number(res.totalCount)
		// 	})
		// 	.finally(() => {})

		// pageJson

	}

	onMounted(() => {
		getTableData()
	})
</script>

<style lang="scss" scoped>
	.rule-center {
		.search {
			.search-card {
				margin-bottom: 20px;

				.demo-form-inline .el-input {
					--el-input-width: 200px;
				}

				.demo-form-inline .el-select {
					--el-select-width: 200px;
				}
			}
		}
		.table {
			padding: 10px;
			background-color: #fff;
			position: relative;
			.table-tool {
				margin-left: 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.tool-title {
					box-sizing: border-box;
					position: relative;
					padding-left: 10px;
					font-size: 16px;
					line-height: 32px;
					color: #222222;
					font-weight: 500;
					&::before {
						position: absolute;
						display: block;
						content: '';
						left: 0;
						top: 7px;
						width: 4px;
						height: 16px;
						background-color: #3f8cf7;
					}
				}
				.tool-btn {
					margin-bottom: 20px;
				}
			}
			.table-pagination {
				position: absolute;
				margin-top: 20px;
				right: 10px;
				bottom: 10px;
			}
		}
	}
	.el-form-item {
		margin-bottom: 0px;
	}
</style>
